<template>
	<!-- 设置 -->
	<view class="page-content">
		<view class="body-box">
			<view class="setting"  @click="handleClear">
				<view class="slot-tit">退出登录</view>
			</view>
			<uni-popup ref="popupDialog" type="dialog">
				<uni-popup-dialog :type="msgType" title="确定退出登录吗" content="" :before-close="false" @confirm="dialogConfirm">
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			uniPopupDialog
		},
		data() {
			return {
				msgType:'info'
			}
		},
		computed: {
			...mapState(['hasLogin', 'openid', 'token',  'userInfo'])
		},
		onLoad() {
		},
		methods: {
			...mapMutations(['setLogin', 'setloginStatus', 'setUserInfo', 'login','loginOut']),
			//跳转详细页
			todetail(type) {
				if (type === 'setting') {
					uni.navigateTo({
						url: `/pages/user/setting`
					})
				}
			},
			handleClear() {
				this.$refs.popupDialog.open()
			},
			dialogConfirm() {
				// #ifdef MP
				uni.reLaunch({
					url: `/pages/user/index`
				})
				// #endif
				this.loginOut()
				this.$refs.popupDialog.close()
				uni.showToast({
					title: '退出成功',
					duration: 2000,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	.page-content {
		width: 100%;
		height: 100vh;
		background-color: #f5f5f5;
	}
	.body-box {
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		padding: 0 30rpx;
	
		.setting {
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			background-color: #fff;
			overflow: hidden;
			margin: 0 30rpx;
			line-height: 100rpx;
		
			.slot-tit {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
				text-align: center;
			}
		}
	}
</style>
